<template>
  <view>
    <u-navbar :is-back="true" title="确认订单" :border-bottom="false"></u-navbar>
    <view>
      <view v-if="goodsInfo.type === 1" class="locationView">
        <view
          v-if="form.addressId"
          class="addressView"
          style="flex-flow: column; margin-top: 20rpx; align-items: flex-start"
          @click="onPickupAddress"
        >
          <view
            class="shopView-location dis-flex flex-y-between"
            style="margin-bottom: 20rpx; width: 100%"
          >
            <view>{{ form.fullAddress }}</view>
            <u-icon size="28" name="/static/more.png"></u-icon>
          </view>
          <view class="dis-flex">
            <u-icon size="28" name="/static/dw-g.png"></u-icon>
            <view class="addName" style="font-size: 28rpx">
              {{ form.receiverName + ' ' + form.receiverMobile }}
            </view>
          </view>
        </view>
        <view v-else class="addressView" @click="onPickupAddress">
          <u-icon size="28" name="/static/dw-g.png" style="margin-top: 4rpx"></u-icon>
          <view class="location">
            <view class="address">点击选择收货人</view>
          </view>
          <u-icon size="28" name="/static/more.png"></u-icon>
        </view>
      </view>
      <view class="infoView">
        <view class="goodsView">
          <u-image
            v-if="goodsInfo.picUrl"
            width="180"
            height="180"
            :src="goodsInfo.picUrl"
            border-radius="10"
          ></u-image>
          <u-image
            v-else
            src="/static/gift.png"
            width="140rpx"
            height="140rpx"
            mode="aspectFit"
          ></u-image>
          <view class="goodsData" style="padding: 10rpx 0">
            <text class="goodsTitle oneline-hide-1">{{ goodsInfo.name }}</text>
            <view class="price">
              <text class="">原价:</text>
              <text>¥{{ formatPrice(goodsInfo.price) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="infoView">
      <view class="totalView" style="padding-bottom: 10rpx">
        <view class="totalTitle">总价</view>
        <view class="dis-flex flex-x-center">
          <view class="mr-20">¥{{ formatPrice(goodsInfo.price) }}</view>
        </view>
      </view>
      <view class="totalView" style="padding-bottom: 10rpx">
        <view class="totalTitle">减免</view>
        <view
          class="dis-flex flex-x-center"
          style="color: #f54831; font-size: 30rpx; font-weight: 600"
        >
          <view class="mr-20">-¥{{ formatPrice(goodsInfo.price) }}</view>
        </view>
      </view>
      <u-line></u-line>
      <view class="jisuan dis-flex">
        <text class="total-goods mr-20">共1样赠品</text>
        <text class="yh mr-20">已优惠¥{{ formatPrice(goodsInfo.price) }}</text>
        <text class="heji">合计：</text>
        <text class="total-Price">¥0.00</text>
      </view>
    </view>

    <view class="bottomView">
      <view class="bt-box dis-flex">
        <view class="bottomBtn" @click.stop.prevent="onExchange()">确认领取</view>
      </view>
    </view>
  </view>
</template>

<script>
import PayPopup from '@/components/PayPopup.vue'

let systemInfo = uni.getSystemInfoSync()
export default {
  components: {
    PayPopup
  },
  data() {
    return {
      goodsInfo: {
        id: 0,
        type: 0,
        picUrl: '',
        name: '',
        price: 0
      },
      form: {
        id: 0,
        receiverName: '',
        receiverMobile: '',
        addressId: '',
        fullAddress: ''
      }
    }
  },
  onLoad(res) {
    this.goodsInfo = JSON.parse(res.item)
    this.form.id = this.goodsInfo.id
  },
  computed: {
    formatPrice() {
      return (e) => {
        if (e.toString().includes('.')) {
          return e
        }
        return (Number(e) * 0.01).toFixed(2)
      }
    },
    // 转换字符数值为真正的数值
    navbarHeight() {
      let h
      // #ifdef APP-PLUS || H5
      h = this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      h = this.height ? this.height : height
      // #endif
      return h
    }
  },
  methods: {
    onPickupAddress() {
      uni.$on('manage', (e) => {
        this.form.receiverName = e.name
        this.form.receiverMobile = e.mobile
        this.form.addressId = e.id
        this.form.fullAddress = e.fullAddress
        uni.$off('manage')
      })
      this.$utils.route('/other/address-manage/address-manage?isCheck=' + true)
    },
    onExchange() {
      // 领取线上产品需要提供收货地址
      if (!this.goodsInfo.type === 1 && !this.form.receiverName) {
        this.$u.toast('请选择收货人信息')
        return
      }
      this.$u.post('/app-api/promotion/gift/record/take', this.form).then((res) => {
        if (res.code === 0) {
          this.$u.toast('领取成功')
          setTimeout(function () {
            uni.reLaunch({
              url: '/pages/ucenter/ucenter'
            })
          }, 1000)
        } else {
          this.$u.toast(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('order-confirm.css');

.couponListView {
  display: flex;
  flex-direction: column;
}

.couponView {
  display: flex;
  flex-direction: row;
  background: #fff;
  /* box-shadow: 0px -8rpx 21rpx 0px rgba(230, 225, 227, 0.5); */
  border-radius: 20rpx;
}

.couponView2 {
  display: flex;
  flex-direction: row;
  background: #f5f5f5;
  border-radius: 20rpx 20rpx 0px 0px;
}

.moneyView {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 190rpx;
  height: 170rpx;
  background: #0f76bc;
  border-radius: 20rpx 0rpx 0px 20rpx;
  color: #fff;
}

.moneyView2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 190rpx;
  height: 170rpx;
  background: #f5f5f5;
  border-radius: 20rpx 0rpx 0px 20rpx;
}

.couponMoney {
  font-size: 24rpx;
}

.couponMoney text {
  font-size: 50rpx;
  font-weight: bold;
}

.couponTips {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.couponMoney2 {
  font-size: 30rpx;
  color: #999;
}

.couponMoney2 text {
  font-size: 38rpx;
  font-weight: bold;
  color: #999;
}

.couponTips2 {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.lineView {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  margin-left: -15rpx;
  height: 170rpx;
}

.circle {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background: #fff;
  margin-top: -15rpx;
}

.circle2 {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background: #fff;
  margin-bottom: -15rpx;
}

.line {
  flex: 1;
  width: 1px;
  /* 设置元素的宽度 */
  border-left: 1px dashed #fe333340;
  /* 左边虚线 */
}

.line2 {
  flex: 1;
  width: 1px;
  /* 设置元素的宽度 */
  border-left: 1px dashed #fff;
  /* 左边虚线 */
}

.couponInfoView {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20rpx 0px;
  height: 170rpx;
  background: #f5f5f5;
  border-radius: 10rpx 10rpx 0px 0px;
  position: relative;
}

.couponInfoView2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20rpx 0px;
  height: 170rpx;
  background: #f5f5f5;
  border-radius: 10rpx 10rpx 0px 0px;
  position: relative;
}

.InfoView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.couponTitle {
  font-size: 32rpx;
  color: #333333;
}

.couponTitle2 {
  font-size: 32rpx;
  color: #999;
}

.couponTime {
  flex: 1;
  font-size: 24rpx;
  color: #333;
}

.couponTime2 {
  flex: 1;
  font-size: 24rpx;
  color: #999;
}

.couponBtn {
  background-color: #0f76bc;
  font-size: 26rpx;
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  color: #fff;
  border-radius: 35rpx;
  margin: -55rpx 20rpx 0 0;
}

.couponBtn2 {
  font-size: 26rpx;
  color: #fe3333;
  opacity: 0.5;
  margin-right: 20rpx;
}

.couponText {
  font-size: 28rpx;
  font-weight: 400;
  color: #999999;
  margin-right: 20rpx;
}

.open-vip {
  padding: 20rpx;

  .vip-tl {
    padding-bottom: 10rpx;

    .bt {
      width: 150rpx;
      height: 50rpx;
      background: linear-gradient(90deg, #f5cd71, #f5e39d);
      border-radius: 25rpx;
      font-size: 24rpx;
      color: #995406;
    }

    .des {
      font-size: 28rpx;
      color: #333333;

      .col {
        color: #fa453c;
      }

      .bold {
        font-size: 36rpx;
        margin: 0 2rpx;
      }
    }
  }

  .vip-qy {
    font-weight: 600;
    font-size: 28rpx;
    color: #333333;
    margin: 10rpx 0;
  }

  .description {
    font-size: 24rpx;
    color: #999999;
  }
}

.jisuan {
  justify-content: flex-end;
  padding: 30rpx 20rpx;
  align-items: flex-end;

  .total-goods {
    font-size: 28rpx;
    color: #333333;
  }

  .yh {
    font-size: 26rpx;
    color: #999999;
    padding-bottom: 2rpx;
  }

  .heji {
    font-size: 28rpx;
  }

  .total-Price {
    font-size: 32rpx;
    color: #fa453c;
  }
}

.card {
  padding: 30rpx 20rpx;
}

.count-day {
  .day {
    font-weight: 600;
    font-size: 32rpx;
    color: #333333;
    margin-right: 20rpx;
  }

  .week {
    font-size: 26rpx;
    color: #333333;
  }

  .count {
    font-size: 24rpx;
    color: #10a28f;
    margin: 0 60rpx;
  }
}

.locationView {
  .goods-name {
    font-weight: 600;
    font-size: 32rpx;
    color: #333333;
    margin: 20rpx 0 10rpx 0;
  }

  .goods-detail {
    font-size: 24rpx;
    color: #666666;
  }
}

.card-tl {
  font-weight: 600;
  font-size: 30rpx;
  color: #333333;
  margin-bottom: 20rpx;
}

.group {
  .item {
    margin-bottom: 30rpx;
    color: #333333;
    font-size: 28rpx;

    .item-tl {
      margin-right: 40rpx;
    }

    .item-con {
      font-weight: 600;
    }
  }

  .item:last-child {
    margin: 0;
  }
}

.bt-box {
  width: 100%;
}
</style>
